<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布内容</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
<div id="app">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        </el-form-item>
        <el-form-item label="发布内容" prop="details">
            <el-input type="textarea" v-model="ruleForm.details"></el-input>
        </el-form-item>

        <el-form-item label="备注">
            <el-input v-model="ruleForm.remark" placeholder="可留联系方式"></el-input>
        </el-form-item>

        <!--添加图片上传组件-->
        <el-form-item label="上传图片">
            <el-upload
                    accept="image/*"
                    action="/upload"
                    list-type="picture-card"
                    capture="camera"

                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :on-success="onSuccess"
                    multiple

                    :limit="10"
                    :on-exceed="handleExceed"
                    v-model="ruleForm.img">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="add">发布</el-button>
            <el-button @click="to">返回</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            ruleForm: {
                details:'',
                remark:'',
                img: [] //存放上传的图片列表
            },rules: {
                details: [
                    { required: true, message: '发布内容不允许为空', trigger: 'blur' }
                ]
            },
            dialogImageUrl: '', //预览图片的地址
            dialogVisible: false //预览图片的对话框是否可见
        },
        methods: {
            //预览图片
            handlePreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //删除图片
            handleRemove(file, img) {

            },
            //删除前确认
            beforeRemove(file, img) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            //文件上传时
            onSuccess(response,file,fileList){
                console.log(response.data)
                this.ruleForm.img.push(response.data)
                console.log(this.ruleForm.img);
            },
            //超出数量限制
            handleExceed(files, img) {
                this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + img.length} 个文件`);
            },
            to(){
                window.location.href="wall.html"
            },
            add(){
                axios.post("wall/add",this.ruleForm).then(result => {
                    if (result.data.code===2000){
                        this.$message({message: result.data.msg, type: 'success'});
                        window.location.href="wall.html"
                    }

                })
            }
        }
    })
</script>
</html>